<template>
  <div class="WebWithdrawal">
    <div class="head">
      <div class="card">
        <div class="baoshi">
          <img src="../assets/image/baoshi.png" alt="" />
        </div>
        <h3>{{ balance }}</h3>
      </div>
    </div>
    <div class="content">
      <div v-for="(item, index) in list" :key="index">
        <span class="reputationValueSpan">心动值≥{{ item.creditTsv }}</span>

        <div class="reputationValueCard">
          <div
            class="reputationValueBox"
            v-for="item1 in item.drawList"
            :key="item1.id"
            :class="{ active: active == item1.withdrawAmount }"
            @click="selected(item1.costDiamod, item1.id)"
          >
            <div class="contentBox" :class="{ active: targetId == item1.id }">
              <div class="reputationValueBoxOne">
                {{ "¥ " + item1.withdrawAmount }}
              </div>
              <!-- <div class="line"></div> -->
              <div class="reputationValueBoxTwo">
                <img src="../assets/image/baoshi.png" alt="" />
                {{ item1.costDiamod }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <div @click="submit">提现</div>
    </div>
  </div>
</template>

<script>
import {
  diamodWithdrawReputationList,
  userUserinfo,
  diamodWithdrawWtDrawDmod,
} from "../api/reply";
import { getAppToken } from "@/utils/getAppToken";
export default {
  data() {
    return {
      list: [],
      active: "",
      balance: "666", //余额
      isBindAliPay: 0,
      targetId: "",
    };
  },
  methods: {
    selected(costDiamod, id) {
      // this.active = costDiamod;
      this.targetId = id;
      // parseInt(this.balance) >= parseInt(costDiamod)
      // if (true) {
      //   console.log(this.balance);
      //   console.log(costDiamod);
      //   localStorage.setItem("txid", id);
      //   this.$router.push(`/WithdrawalMethod`);
      // } else {
      //   alert("宝石不足！");
      // }
    },
    // 获取套餐列表
    async getList() {
      const res = await diamodWithdrawReputationList();
      if (res.code == 0) {
        this.list = res.data;
      }
    },
    // 获取个人信息
    async getUserInfo() {
      const res = await userUserinfo();
      if (res.code == 0) {
        this.balance = res.data.diamond;
        this.isBindAliPay = res.data.ext.isBindAliPay;
      } else {
        this.$router.push(`/Login?path=${this.$route.fullPath}`);
      }
    },
    agreement() {
      this.$router.push("/ServiceAgreement");
    },
    async submit() {
      if (this.targetId == "") {
        return this.$toast.fail("请选择提现套餐！");
      }
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      const res = await diamodWithdrawWtDrawDmod({
        diamodId: this.targetId,
        type: 1,
      });
      this.$toast.clear();
      if (res.code == 0) {
        this.$router.push({
          path: "/GemWithdrawal",
          query: {
            status: res.data.status,
            errorMsg: res.data.errorMsg,
            errorCode: res.data.errorCode,
          },
        });
      }
    },
  },
  created() {
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 0,
    });
    getAppToken().then(() => {
      this.$toast.clear();
      this.getList();
      this.getUserInfo();
    });
  },
};
</script>

<style lang="less" scoped>
.WebWithdrawal {
  background: #fff;

  min-height: 100vh;

  .content {
    padding: 20px;
  }
  .reputationValueSpan {
    color: #aa66f5;
    font-size: 14px;
    margin: 5px 0px 8px 0px;
    display: inline-block;
  }
  .reputationValueCard {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .reputationValueBox {
      margin-bottom: 15px;
      .contentBox {
        width: 150px;
        height: 120px;
        border-radius: 4px;
        background: #f5f2ff;
        border: 3px solid #f5f2ff;
        color: white;
        // .line {
        //   height: 3px;
        //   background-color: #fff;
        // }
        .reputationValueBoxOne {
          height: 85px;
          border-bottom: 3px solid#ffffff;
          background: url("../assets/image/bg.png") no-repeat 50%;
          background-size: 80% 80%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
        }
        .reputationValueBoxTwo {
          display: flex;
          align-items: center;
          color: #333333;
          font-size: 15px;
          line-height: 35px;
          justify-content: center;
          img {
            width: 15px;
            height: 15px;
          }
        }
      }
      // .active
    }
    .active {
      // background: url("../assets/image/kuang.png") no-repeat;
      // background-size: 100%;
      border: 3px solid #b472fd !important;
    }
  }
  .GoldCoinRechargeBtn {
    display: flex;
    justify-content: center;
  }
  .GoldCoinRechargeSpan {
    text-decoration: underline;
    color: #c4c0d5;
    padding-bottom: 30px;
    margin-top: 10px;
  }
  .qq_span {
    color: white;
  }
  h3 {
    color: #c4c0d5;
    margin-top: 30px;
  }
  //1.4
  .head {
    height: 120px;
    background: linear-gradient(90deg, #dd75ff 0%, #9361ff 100%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    .card {
      width: 288px;
      height: 100px;
      border-radius: 11px 11px 0 0;
      background: #ffffff;
      .baoshi {
        padding-top: 16px;
        display: flex;
        justify-content: center;
        img {
          width: 25px;
          height: 25px;
        }
      }
      h3 {
        margin-top: 8px;
        font-size: 30px;
        font-family: Gilroy;
        font-weight: 600;
        line-height: 36px;
        color: #131313;
        text-align: center;
      }
    }
  }
  .btn {
    padding: 10px 15px 25px;
    div {
      border-radius: 25px;
      height: 50px;
      background: linear-gradient(90deg, #9981ed 0%, #b871ff 100%);
      text-align: center;
      line-height: 50px;
      font-size: 17px;
      color: #fff;
      font-weight: 500;
    }
  }
}
</style>